<template>
    <el-form-item :label="label" prop="company_id"> 
        <el-select 
            v-model="company_id" 
            clearable
            filterable
            placeholder="请选择公司"
            :class="customClass"
            @change="handleCompanyChange"
        >
            <el-option
                v-for="item in companyOptions"
                :key="item.id"
                :label="item.company_name"
                :value="item.id"
            />
        </el-select>
    </el-form-item>
    <el-form-item v-if="showTypeSelect" label="类型" prop="type">
        <el-select
            v-model="selectedType"
            clearable
            placeholder="请选择类型"
            :class="customClass"
            @change="handleTypeChange"
        >
            <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
        </el-select>
    </el-form-item>
</template>

<script lang="ts" setup>
import { companyAllLists, getCompanyUploadConfig } from '@/api/supervise/company'
import { getDepartmentTypeText } from '@/utils/supervise'

// 定义内部公司ID变量
const company_id = ref()
const selectedType = ref()

const companyOptions = ref([])

const typeOptions = ref([])

const props = defineProps({
    label: {
        type: String,
        default: '公司'
    },
    customClass: {
        type: String,
        default: ''
    },
    showTypeSelect: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['selectCompany', 'change', 'selectType'])


const getCompanyOptions = async () => {
    try {
        const res = await companyAllLists({})
        companyOptions.value = res || []
    } catch (error) {
        console.error(error)
    }
}

// 获取类型列表
const getTypeOptions = async (companyId: string | number) => {
    try {
        const res = await getCompanyUploadConfig({ company_id: companyId })
        console.log(res)
        const list: number[] = (res?.lists || []).map((item: { type: string | number }) => Number(item.type))
        if (list && Array.isArray(list) && list.length > 0) {
            const uniqueTypes: number[] = Array.from(new Set(list))
            typeOptions.value = uniqueTypes.map(type => ({
                id: type,
                name: getDepartmentTypeText(type)
            }))
            console.log(typeOptions.value)
        }
    } catch (error) {
        console.error(error)
    }
}

// 处理公司选择变化
const handleCompanyChange = async (value: string | number) => {
    emit('selectCompany', value)
    if (props.showTypeSelect && value) {
        await getTypeOptions(value)
        selectedType.value = undefined 
    } else {
        typeOptions.value = []
        selectedType.value = undefined
    }
}

// 处理类型选择变化
const handleTypeChange = (value: string | number) => {
    emit('selectType', value)
}

// 设置公司ID
const setCompanyId = (id: string | number) => {
    company_id.value = id
    handleCompanyChange(id)
}

// 获取公司ID
const getCompanyId = () => {
    return company_id.value
}

// 获取选中的类型
const getSelectedType = () => {
    return selectedType.value
}

onMounted(() => {
    getCompanyOptions()
})

// 暴露方法
defineExpose({
    setCompanyId,
    getCompanyId,
    getSelectedType
})
</script>